import React, { PureComponent } from 'react';
import Styles from '@/scss/lefts.scss';
import IconStyles from '@/font_icon/iconfont.css';
import IconStyles1 from '@/icon/font_icon1/iconfont.css';
import CONSTS from '@/inits/consts';
const ISSHOW = CONSTS.ISSHOW;
//左边导航栏li组件
class LeftNav extends PureComponent<Iprops, any> {
  render() {
    return (
      <ul className={Styles.left_ul}>
        {/* 此处的三元表达式用处是渲染是否为点击样式 */}
        <li
          className={this.props.isShow == ISSHOW.MY ? Styles.On_click : ''}
          onClick={() => this.props.handleIsShow(CONSTS.ISSHOW.MY)}
        >
          {' '}
          <i
            className={`${IconStyles.iconfont} ${IconStyles.icon_shijian1}`}
          ></i>
          全部
        </li>
        <li
          className={this.props.isShow == ISSHOW.UNDONE ? Styles.On_click : ''}
          onClick={() => this.props.handleIsShow(CONSTS.ISSHOW.UNDONE)}
        >
          {' '}
          <i
            className={`${IconStyles.iconfont} ${IconStyles.icon_daichuli}`}
          ></i>
          待处理
        </li>
        <li
          className={this.props.isShow == ISSHOW.DONE ? Styles.On_click : ''}
          onClick={() => this.props.handleIsShow(CONSTS.ISSHOW.DONE)}
        >
          {' '}
          <i
            className={`${IconStyles.iconfont} ${IconStyles.icon_yiwancheng}`}
          ></i>
          已处理
        </li>
        <li
          className={this.props.isShow == ISSHOW.PAST ? Styles.On_click : ''}
          onClick={() => this.props.handleIsShow(CONSTS.ISSHOW.PAST)}
        >
          {' '}
          <i
            className={`${IconStyles.iconfont} ${IconStyles.icon_shijian}`}
          ></i>
          已过期
        </li>
        <li
          className={this.props.isShow == ISSHOW.COLLECT ? Styles.On_click : ''}
          onClick={() => this.props.handleIsShow(CONSTS.ISSHOW.COLLECT)}
        >
          {' '}
          <i
            className={`${IconStyles1.iconfont} ${IconStyles1.icon_shoucang}`}
          ></i>
          已收藏
        </li>
        <li
          className={this.props.isShow == ISSHOW.RECYCLE ? Styles.On_click : ''}
          onClick={() => this.props.handleIsShow(CONSTS.ISSHOW.RECYCLE)}
        >
          {' '}
          <i
            className={`${IconStyles.iconfont} ${IconStyles.icon_huishouzhan}`}
          ></i>
          回收站
        </li>
        <li
          className={this.props.isShow == ISSHOW.DATA ? Styles.On_click : ''}
          onClick={() => this.props.handleIsShow(CONSTS.ISSHOW.DATA)}
        >
          {' '}
          <i className={`${IconStyles.iconfont} ${IconStyles1.font_icon1}`}></i>
          个人中心
        </li>
      </ul>
    );
  }
}
//传入的是一个显示隐藏标识,与改变显示隐藏标识函数 类型
type Iprops = {
  isShow: string;
  handleIsShow: (show: string) => void;
};

export default LeftNav;
